<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-26 09:16:44
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 14:21:56
 * @FilePath: /vue3-cesium-plus/src/components/control/vc-search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="vc-vr-control" :style="positionStyle" >
      <div class="vc-button" @click="onClickItem" :class="[open ? 'isActive' : '']" >
            <img v-if="open" src="@/assets/images/home/ic_home_vr_w.png" class="image" />
            <img v-else src="@/assets/images/home/ic_home_vr.png" class="image" />
            <span>全景</span>
      </div>
    </div>
  </template>
  
<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { positionProps, usePosition } from '../composables/usePosition'
import * as Cesium from 'cesium'
import { useCustomCesium } from "../useCustomCesium";
const {vueCesium} = useCustomCesium();
import { getVrDataV2 } from '@/api/vr'
const open = ref(false)


const props = defineProps({
    ...positionProps,
})
const { positionStyle } = usePosition(props)
const billboards = ref<Cesium.BillboardCollection>()
// const labels = ref<Cesium.LabelCollection>()
onMounted(()=>{
  setTimeout(() => {
    
    // billboards.value = vueCesium.viewer.scene.primitives.add(new Cesium.BillboardCollection());
    // console.log("----",vueCesium.viewer,billboards.value)
    // labels.value = vueCesium.viewer.scene.primitives.add(new Cesium.LabelCollection());
  }, 1000);
})

// 2. 创建纹理缓存
// const textureCache = {};

const getSimpleViewportBounds =()=>{
 const rectangle = vueCesium.viewer.camera.computeViewRectangle();
    
    if (rectangle) {
        return {
            southwest: {
                longitude: Cesium.Math.toDegrees(rectangle.west),
                latitude: Cesium.Math.toDegrees(rectangle.south)
            },
            northeast: {
                longitude: Cesium.Math.toDegrees(rectangle.east),
                latitude: Cesium.Math.toDegrees(rectangle.north)
            }
        };
    }
    return null;
}

const onClickItem = ()=>{
    open.value = !open.value;
    if(!open.value){
      vueCesium.viewer.camera.moveEnd.removeEventListener(onLoadVrData)
      billboards.value!.removeAll();
      return;
    }
    onLoadVrData();
    vueCesium.viewer.camera.moveEnd.addEventListener(onLoadVrData)
}

const onLoadVrData= async()=>{

  const bounds = getSimpleViewportBounds();
  console.log("----",bounds)
  if(bounds == null){return}

  let params = {
    gt_id1: bounds!.northeast.longitude,
    lt_id1: bounds!.northeast.latitude,
    gt_id2: bounds!.southwest.longitude,
    lt_id2: bounds!.southwest.latitude,
  };
  let res = (await getVrDataV2(params)) as any;
  console.log("--getVrDataV2--",res)
  if(res.code == 200){
    // billboards.value.removeAll();
    // res.data.forEach((item)=>{
    //   let position = Cesium.Cartesian3.fromDegrees(item.gt_id, item.lt_id);
    //     var text = item.name ?? "测试";
    //     // 使用缓存或创建新纹理
    //     if (!textureCache[text]) {
    //       textureCache[text] = createCombinedTexture(text);
    //     }
        
    //     billboards.value.add({
    //       position: position,
    //       image: textureCache[text],
    //       width: 100,
    //       height: 64,
    //       scale: 0.5,
    //       // scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5), // 基于距离的缩放
    //     });
      // billboards.value.add({
      //   position:position,
      //   image: Cesium.buildModuleUrl('Assets/Textures/maki/fuel.png'),
      //   width: 20,
      //   height: 20,
      //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      // });
      // labels.value.add({
      //     position: position,
      //     text: item.name ?? "测试",
      //     font: '12px sans-serif',
      //     fillColor: Cesium.Color.WHITE,
      //     outlineColor: Cesium.Color.BLACK,
      //     outlineWidth: 2,
      //     style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      //     verticalOrigin: Cesium.VerticalOrigin.TOP,
      //     horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
      //     pixelOffset: new Cesium.Cartesian2(0, 10),
      //     showBackground: true,
      //     // backgroundColor: new Cesium.Color(0.1, 0.1, 0.1, 0.7)
      //   });
    // })
  }
  
}



// const createCombinedTexture = (text)=> {
//   const canvas = document.createElement('canvas');
//   canvas.width = 128;
//   canvas.height = 64;
//   const ctx = canvas.getContext('2d');
  
//   // 绘制背景
//   ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
//   ctx.beginPath();
//   ctx.roundRect(0, 0, canvas.width, canvas.height, 8);
//   ctx.fill();
  
//   // 绘制图标
//   const img = new Image();
//   img.crossOrigin = 'Anonymous'; // 解决跨域问题
  
//   // 使用Promise确保图片加载完成
//   return new Promise((resolve) => {
//     img.onload = function() {
//       ctx.drawImage(img, 10, 10, 32, 32);
      
//       // 绘制文字
//       ctx.fillStyle = 'white';
//       ctx.font = '10px sans-serif';
//       ctx.fillText(text, 50, 30);
      
//       resolve(canvas);
//     };
    
//     img.onerror = function() {
//       console.error('Failed to load image');
//       // 即使图片加载失败，也继续完成绘制
//       ctx.fillStyle = 'white';
//       ctx.font = '10px sans-serif';
//       ctx.fillText(text, 50, 30);
      
//       resolve(canvas);
//     };
    
//     // 使用Cesium的资源路径或直接URL
//     img.src = '../../../../assets/images/ic_home_air_photo.png'; //'https://sharvr.douyin.blue/img/red_marker.png';
//   });
// }


// const onClickItem = ()=>{

// console.log("----",$vc.viewer) 

// // 2. 创建纹理缓存
// const textureCache = {};

// // 3. 创建BillboardCollection
// const billboards = $vc.viewer.scene.primitives.add(new Cesium.BillboardCollection({
//   scene: $vc.viewer.scene
// }));

// 4. 添加1000个布告板
// for (let i = 0; i < 1000; i++) {
//   const longitude = -120 + Math.random() * 40;
//   const latitude = 30 + Math.random() * 20;
//   const position = Cesium.Cartesian3.fromDegrees(longitude, latitude);
//   const text = `点位${i}`;
  
//   // 使用缓存或创建新纹理
//   // if (!textureCache[text]) {
//   //   textureCache[text] = createCombinedTexture(text);
//   // }
  
//   billboards.add({
//     position: position,
//     image: textureCache[text],
//     width: 128,
//     height: 64,
//     scale: 0.5,
//     // scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5), // 基于距离的缩放
//   });
// // }

// }



// const onClickItem1 = ()=>{
//   // $vc.viewer.entities.add({
// //   position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
// //   billboard: {
// //     image: Cesium.buildModuleUrl('Assets/Textures/maki/fuel.png'),
// //     scale: 0.5
// //   }
// // });
// const billboards = vueCesium.viewer.scene.primitives.add(
//   new Cesium.BillboardCollection()
// );
// const labels = vueCesium.viewer.scene.primitives.add(new Cesium.LabelCollection());

// for (let i = 0; i < 1000; i++) {

//     const longitude = -120 + Math.random() * 40;
//     const latitude = 30 + Math.random() * 20;
//     const position = Cesium.Cartesian3.fromDegrees(longitude, latitude);
    
//   billboards.add({
//     position: position,
//     image: Cesium.buildModuleUrl('Assets/Textures/maki/fuel.png'),
//     width: 30,
//     height: 30,
//      verticalOrigin: Cesium.VerticalOrigin.BOTTOM
//   });
//   labels.add({
//       position: position,
//       text: `点位${i}`,
//       font: '12px sans-serif',
//       fillColor: Cesium.Color.WHITE,
//       outlineColor: Cesium.Color.BLACK,
//       outlineWidth: 2,
//       style: Cesium.LabelStyle.FILL_AND_OUTLINE,
//       verticalOrigin: Cesium.VerticalOrigin.TOP,
//       horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
//       pixelOffset: new Cesium.Cartesian2(0, 10),
//       showBackground: true,
//       backgroundColor: new Cesium.Color(0.1, 0.1, 0.1, 0.7)
//     });
// }
// }

</script>
  
<style scoped lang="scss">
  .vc-vr-control {
    position: absolute;
    z-index: 100;
    .active {
      background: var(--el-color-primary);
      color: #fff;
    }

    
  }
</style>